<template>
  <div class="gift-warp">
    <shooting-star />
    <blink-star
      :stars="[
        { left: '2.5rem', top: '0.8rem', type: '--yellow-square' },
        { left: '4.5rem', top: '0.5rem', type: '--cyan' },
        { left: '3.5rem', top: '9.5rem', type: '--yellow-bling' },
        { left: '3.5rem', top: '11.5rem', type: '--yellow-bling' },
      ]"
    />
    <div class="character"></div>
    <div class="title"></div>
    <div class="gift">
      <div :class="['gift-gift', { 'gift-animation-hide': showDialog }, {'gift-gift--shake': travelInfo.is_first_take}]"></div>
    </div>
    <div class="bottom-btns">
      <div class="btn btn--gift" @click="showDialog = true">
        <template v-if="travelInfo.is_first_take">
          拆开礼物
        </template>
        <template v-else>
          查看礼物
        </template>
      </div>

      <div class="btn-wrap">
        <div class="btn btn--replay" @click="$emit('replay')">再看一遍</div>
        <div class="btn btn--go-to-wish" @click="goToWish">
          <template v-if="travelInfo && travelInfo.wish_is_Chosen">
            查看愿望
          </template>
          <template v-else> 我要许愿 </template>
        </div>
      </div>
    </div>
  </div>
  <red-dialog
    v-if="showDialog"
    :have-taked="!travelInfo.is_first_take"
    @close-red-dialog="showDialog = false"
    @gift-received="handleGiftReceived"
  />
</template>

<script>
import RedDialog from '../components/red-dialog.vue'

export default {
  components: {
    RedDialog
  },
  props: {
    travelInfo: {
      type: Object
    }
  },
  emits: ['replay', 'gift-received'],
  // setup () {
  //   let show = ref(false)
  //   function changeshow () {
  //     show.value = true
  //   }
  //   return {
  //     show,
  //     changeshow
  //   }
  // }
  data () {
    return {
      showDialog: false,
      show: false
    }
  },
  watch: {
    travelInfo: {
      handler (value) {
        console.log(value, '-----value')
      },
      immediate: true
    }
  },
  methods: {
    goToWish () {
      if (this.travelInfo.wish_is_Chosen) {
        this.$router.push({ name: 'mywish' })
      } else {
        this.$router.push({ name: 'wish' })
      }
    },

    handleGiftReceived(){
      this.$emit('gift-received')
    }
  }
}
</script>

<style lang="scss" scoped>
.gift-warp {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("./images/gift/bg.jpg");
  background-size: 100% auto;
  background-position: 0 100%;
  background-repeat: no-repeat;
  // overflow: hidden;
}
.character {
  position: absolute;
  top: 25.7%;
  right: 0;
  width: 1.44rem;
  height: 2.45rem;
  background-image: url("./images/gift/F_character.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  animation: character 4s infinite;
  @keyframes character {
    50% {
      top: 22.7%;
    }
    100% {
      top: 25.7%;
    }
  }
}

.title {
  position: absolute;
  top: 16.57%;
  left: 15%;
  width: 5.06rem;
  height: 2.77rem;
  background-image: url("./images/gift/F_title.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.gift {
  position: absolute;
  top: 37.8%;
  left: 15%;
  width: 5.48rem;
  height: 4.63rem;
  .gift-gift {
    position: absolute;
    bottom: 0;
    left: 12.7%;
    width: 3.74rem;
    height: 4.35rem;
    background-image: url("./images/gift/F_gift.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
  }

  .gift-gift--shake{
     animation: shake 800ms ease-in-out infinite;
    transform-origin:50% 50%;
    @keyframes shake {
      10%,
      90% {
        transform: rotate(0deg)
      }
      20%,
      80% {
        transform:rotate(5deg);
      }
      30%,
      70% {
        transform:rotate(0deg);
      }
      40%,
      60% {
        transform: rotate(-5deg);
      }
      50% {
        transform: rotate(0deg);
      }
    }
  }

  .gift-animation-hide {
    animation: gifthide 0.5s ease-in forwards;
    //animation: name duration timing-function delay iteration-count direction fill-mode;
    @keyframes gifthide {
      0% {
        transform: scale(1);
        opacity: 1;
      }
      99% {
        transform: scale(8);
        opacity: 0;
      }
      100%{
        display: none;
        opacity: 0;
        transform: scale(1);
      }
    }
  }
}
.bottom-btns {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.8rem;
  .btn {
    width: 3.96rem;
    height: 0.89rem;
    line-height: 0.89rem;
    color: #fff;
    background-size: 100% auto;
    font-size: 0.32rem;
    text-align: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn--gift {
    margin: 0 auto;
    color: #fff;
    background-image: url("./images/bg-btn-fill.png");
    margin-bottom: 0.3rem;
  }

  .btn-wrap {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .btn {
      font-size: 0.3rem;
    }
    .btn--replay {
      width: 3.17rem;
      height: 0.71rem;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 0.4rem;
      background-image: url("./images/bg-btn-empty.png");
    }
    .btn--go-to-wish {
      width: 3.17rem;
      height: 0.71rem;
      background-image: url("./images/bg-btn-fill.png");
    }
  }
}
// .bottom-btns{
//   position: absolute;
//   top: 84.63%;
//   left: 23.47%;
//   height: 0.5rem;

// }
</style>
